<template>
  <div class="news-detail">
    <e-head></e-head>
    <div class="main-content">
      <router-info :current="routerInfo"></router-info>
      <div class="flex-container">
        <div class="flex-container-left">
          <div class="flex-left-title">
            {{ $t("lang.news") + ">" + $t("lang.detail") }}
          </div>
          <div class="flex-left-item-list"></div>
        </div>
        <div class="flex-container-right">
          <div class="news-title">
            <h2>{{ tnew.title }}</h2>
          </div>
          <div class="news-time">
            <span>{{ tnew.create_time }}</span>
          </div>
          <div
            class="news-content ql-snow ql-editor"
            v-html="tnew.detail"
          ></div>
        </div>
      </div>
    </div>
    <e-foot></e-foot>
  </div>
</template>
<script>
import Ehead from "@/components/head.vue";
import Efoot from "@/components/foot.vue";
import RouterInfo from "@/components/router-info.vue";
export default {
  components: {
    "e-head": Ehead,
    "e-foot": Efoot,
    RouterInfo,
  },
  data() {
    return {
      tnew: null,
      routerInfo: [
        {
          name: "lang.home",
          route: "",
        },
        {
          name: "lang.news",
          route: "",
        },
        {
          name: "lang.detail",
          route: "",
        },
      ],
    };
  },
  created() {
    const n = JSON.parse(localStorage.getItem("news"));
    this.tnew = n;
  },
};
</script>
<style lang="scss" scoped>
.news-detail {
  .news-title {
    text-align: center;
    margin-bottom: 16px;
  }
  .news-time {
    text-align: center;
    margin-bottom: 16px;
    span {
      display: inline-block;
      border-bottom: 1px solid #ccc;
    }
  }
}
</style>